<style lang="less">
    @import './login.less';
</style>

<template>
    <div class="login">
        <div class="login-con">
            <div class="login-con-box">
                <div class="login-banner">
                    <div id="carouselId" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselId" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselId" data-slide-to="1"></li>
                            <li data-target="#carouselId" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="carousel-item active">
                                <img src="../Login/images/login/1.png" alt="First slide">
                            </div>
                            <div class="carousel-item">
                                <img src="../Login/images/login/2.png" alt="Second slide">
                            </div>
                            <div class="carousel-item">
                                <img src="../Login/images/login/3.png" alt="Third slide">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-con">
                    <div class="form-con-header">
                        卫生随机抽取管理系统
                    </div>
                    <el-form  ref="loginFormRef" :model="loginForm">
                        <el-form-item prop="username">
                            <input type="text" class="user-name" placeholder="用户名" v-model="loginForm.username">
                        </el-form-item>
                        <el-form-item prop="password">
                            <input type="password" class="user-password" placeholder="用户密码" v-model="loginForm.password">
                        </el-form-item>
                            <el-button type="primary" size="large" class="sub-btn" style="background:#b687e2;border:0;color:white;font-family:'幼圆';width:250px" @click="login()">登录</el-button>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            loginForm:{
                  username:'gfx',//管理员账号
                  password:'123456',//管理员密码
            }
        }
    },
    mounted(){
    //绑定事件
     window.addEventListener('keydown',this.keyDown);
  },
    methods:{
      login(){
            //验证校验规则
            if(this.loginForm.username=="" || this.loginForm.password==""){
                this.$XModal.message({message:'账号或密码为空！！',status:'warning'})
            }else{
            this.$refs.loginFormRef.validate(async valid =>{
              if(!valid) return ;//验证失败
           this.$http.post('login',this.loginForm).then((res)=>{
            if(res.data.flag=="ok"){
                if(res.data.user.username==this.loginForm.username && res.data.user.password==this.loginForm.password){
                     this.$XModal.message({message:'操作成功！！',status:'success'})
                      window.sessionStorage.setItem("user",this.loginForm.username)
                       this.$router.push({path:"/Home"})
                     }else{
                     this.$XModal.message({message:'操作失败！！！',status:'error'})
                 }
                 }
           })
          })
            }
      },
      keyDown(e){
        //如果是回车则执行登录方法
      if(e.keyCode == 13){
        this.login()
      }
    },
     destroyed(){
        window.removeEventListener('keydown',this.keyDown,false);
  }
    }
}
</script>

<style>
img{
    width: 300px;
    height: 235px;
}
.active{
    background-color: rgba(0,0,0, 0.5);
}
</style>>
